<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page</title>


    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />

    <script src="/webjars/vue/2.1.3/vue.js"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row" id="pageApp" v-if="totalPages>0">
        <div class="col-md-12">
            <nav>

                <ul class="pagination pagination-sm">
                    <li class="page-item">
                        <a class="page-link" href="#"><i @click="goToNavOne(1)">&laquo;</i></a>
                    </li>
                    <li class="page-item">
                        <a href="#" class="page-link"><i  @click="switchToPage(pageNow-1)">&lt;</i></a>
                    </li>


                    <li class="page-item" v-for="n in numArr" :class="{active:n==pageNow}">
                        <a href="#" @click="switchToPage(n)" class="page-link">{{n}}</a>
                    </li>


                    <li class="page-item">
                        <a href="#" class="page-link"><i  @click="switchToPage(pageNow+1)">&gt;</i></a>
                    </li>
                    <li class="page-item">
                        <a href="#" class="page-link"><i  @click="goToNavLast(totalPages)">&raquo;</i></a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

</body>
</html>


<script>

    var vm = new Vue({
        el: '#pageApp',
        data: {
            totalPages:0,
            pageNow:1,
            numArr:[1,2,3,4,5],
            navNum:5,


        },
        methods: {

            switchToPage:function (indx) {

                if(indx<1){
                    indx=1;
                }
                if(indx>this.totalPages){
                    indx=this.totalPages;
                }


                this.pageNow=indx;


               //上一页
               if(indx<this.numArr[0]){
                   this.numArr=[];
                   var first=indx-this.navNum+1;
                    for(var i=0;i<this.navNum;i++){
                        this.numArr.push(first+i);
                    }
               }


               //下一页
                var length = this.numArr.length;
                var maxIndx = this.numArr[length-1];
                if(indx>maxIndx){

                    this.numArr=[];
                    var size=maxIndx+this.navNum;
                    if(size>this.totalPages){
                        size=this.totalPages;
                    }

                    for(var i=maxIndx+1;i<=size;i++){
                        this.numArr.push(i);
                    }
                }


            },

            goToNavOne:function (num) {

                var size=this.navNum;

                var flag=false;

                if(this.totalPages<this.navNum){

                    size=this.totalPages;
                }


                this.numArr=[];

                for(var i=1;i<=size;i++){
                    this.numArr.push(i);
                }

                this.switchToPage(1);


            },
            goToNavLast:function (num) {


                var n=this.totalPages%this.navNum;

                this.numArr=[];

                for(var i=this.totalPages-n+1;i<=this.totalPages;i++){
                    this.numArr.push(i);
                }

                this.switchToPage(this.totalPages);


            },

            downFile: function (fileName) {

                window.open('/file/downFile/' + fileName);
            },

            getFileList: function () {

                var _self = this;

                $.ajax('/file/fileList').done(
                    function (dat) {

                        console.log(dat);
                        if (dat.code == 0) {

                            var fnameList = dat.data;
                            for (var indx in fnameList) {
//                                vm.fileList.push(fnameList[indx]);
                                _self.fileList.push(fnameList[indx]);
                            }

                        }
                    }
                );
            }
        },
        mounted: function () {

//            this.getFileList();

//            var totolPage = vm.total/10;

        }
    });

</script>